<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实体变更查看器</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <style>
        .log-table th, .log-table td {
            vertical-align: middle;
        }
        .operation-type-insert {
            background-color: #d4edda;
        }
        .operation-type-update {
            background-color: #fff3cd;
        }
        .operation-type-delete {
            background-color: #f8d7da;
        }
        .field-change-summary {
            font-size: 0.85em;
            color: #6c757d;
        }
    </style>
</head>
<body>
    <div class="container-fluid mt-4">
        <h2>实体变更查看器</h2>
        
        <!-- 筛选条件 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5>筛选条件</h5>
            </div>
            <div class="card-body">
                <form id="filterForm">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="entityClass">实体类名</label>
                                <input type="text" class="form-control" id="entityClass" name="entityClass" placeholder="输入实体类名">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="operationType">操作类型</label>
                                <select class="form-control" id="operationType" name="operationType">
                                    <option value="">全部</option>
                                    <option value="INSERT">新增</option>
                                    <option value="UPDATE">修改</option>
                                    <option value="DELETE">删除</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="username">操作用户</label>
                                <input type="text" class="form-control" id="username" name="username" placeholder="输入用户名">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>&nbsp;</label>
                                <div>
                                    <button type="button" class="btn btn-primary" onclick="searchLogs()">查询</button>
                                    <button type="button" class="btn btn-secondary" onclick="resetFilter()">重置</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- 日志列表 -->
        <div class="card">
            <div class="card-header">
                <h5>变更记录列表</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered log-table">
                        <thead>
                            <tr>
                                <th>操作时间</th>
                                <th>操作用户</th>
                                <th>实体类名</th>
                                <th>操作类型</th>
                                <th>实体ID</th>
                                <th>变更字段</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="logTableBody">
                            <!-- 日志数据将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>
                <nav>
                    <ul class="pagination justify-content-center" id="pagination">
                        <!-- 分页控件将通过JavaScript动态加载 -->
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        let currentPage = 1;
        let currentLogs = [];
        
        // 页面加载完成后获取日志数据
        $(document).ready(function() {
            searchLogs();
        });
        
        // 查询日志
        function searchLogs() {
            const entityClass = $('#entityClass').val();
            const operationType = $('#operationType').val();
            const username = $('#username').val();
            
            const params = {
                page: currentPage,
                limit: 10,
                entityClass: entityClass,
                operationType: operationType,
                username: username
            };
            
            $.get('/sys/entityChangeLog/list', params)
                .done(function(response) {
                    if (response.code === 0) {
                        renderLogs(response.data.records);
                        renderPagination(response.data);
                    } else {
                        showErrorMessage('查询失败: ' + response.msg);
                    }
                })
                .fail(function(xhr) {
                    showErrorMessage('查询失败: ' + xhr.responseText);
                });
        }
        
        // 重置筛选条件
        function resetFilter() {
            $('#entityClass').val('');
            $('#operationType').val('');
            $('#username').val('');
            currentPage = 1;
            searchLogs();
        }
        
        // 渲染日志列表
        function renderLogs(logs) {
            currentLogs = logs;
            const tbody = $('#logTableBody');
            tbody.empty();
            
            if (!logs || logs.length === 0) {
                tbody.append('<tr><td colspan="7" class="text-center">暂无数据</td></tr>');
                return;
            }
            
            logs.forEach(log => {
                const rowClass = getOperationTypeClass(log.operationType);
                const fieldChangesSummary = getFieldChangesSummary(log);
                
                const row = `
                    <tr class="${rowClass}">
                        <td>${formatDate(log.createDate)}</td>
                        <td>${log.username || ''}</td>
                        <td>${getSimpleClassName(log.entityClass) || ''}</td>
                        <td>
                            <span class="badge badge-${getOperationTypeBadgeClass(log.operationType)}">
                                ${formatOperationType(log.operationType)}
                            </span>
                        </td>
                        <td>${log.entityId || ''}</td>
                        <td>
                            <div class="field-change-summary">${fieldChangesSummary}</div>
                        </td>
                        <td>
                            <button class="btn btn-sm btn-info" onclick="viewDetail(${log.id})">详情</button>
                        </td>
                    </tr>
                `;
                tbody.append(row);
            });
        }
        
        // 获取字段变更摘要
        function getFieldChangesSummary(log) {
            if (log.fieldChanges && Object.keys(log.fieldChanges).length > 0) {
                const fieldNames = Object.keys(log.fieldChanges);
                if (fieldNames.length <= 3) {
                    return fieldNames.join(', ');
                } else {
                    return fieldNames.slice(0, 3).join(', ') + ` 等${fieldNames.length}个字段`;
                }
            }
            return '无字段变更信息';
        }
        
        // 获取操作类型样式类
        function getOperationTypeClass(operationType) {
            switch (operationType) {
                case 'INSERT': return 'operation-type-insert';
                case 'UPDATE': return 'operation-type-update';
                case 'DELETE': return 'operation-type-delete';
                default: return '';
            }
        }
        
        // 获取操作类型徽章样式类
        function getOperationTypeBadgeClass(operationType) {
            switch (operationType) {
                case 'INSERT': return 'success';
                case 'UPDATE': return 'warning';
                case 'DELETE': return 'danger';
                default: return 'secondary';
            }
        }
        
        // 获取操作类型文本
        function formatOperationType(operationType) {
            switch (operationType) {
                case 'INSERT': return '新增';
                case 'UPDATE': return '修改';
                case 'DELETE': return '删除';
                case 'SELECT': return '查询';
                default: return operationType;
            }
        }
        
        // 获取简化的类名
        function getSimpleClassName(fullClassName) {
            if (!fullClassName) return '';
            return fullClassName.substring(fullClassName.lastIndexOf('.') + 1);
        }
        
        // 格式化日期
        function formatDate(dateString) {
            if (!dateString) return '';
            const date = new Date(dateString);
            return date.getFullYear() + '-' + 
                   String(date.getMonth() + 1).padStart(2, '0') + '-' + 
                   String(date.getDate()).padStart(2, '0') + ' ' + 
                   String(date.getHours()).padStart(2, '0') + ':' + 
                   String(date.getMinutes()).padStart(2, '0') + ':' + 
                   String(date.getSeconds()).padStart(2, '0');
        }
        
        // 渲染分页控件
        function renderPagination(page) {
            const pagination = $('#pagination');
            pagination.empty();
            
            if (page.totalPage <= 1) {
                return;
            }
            
            // 上一页
            const prevDisabled = page.current === 1 ? 'disabled' : '';
            pagination.append(`
                <li class="page-item ${prevDisabled}">
                    <a class="page-link" href="#" onclick="changePage(${page.current - 1})">上一页</a>
                </li>
            `);
            
            // 页码
            for (let i = 1; i <= page.totalPage; i++) {
                const active = i === page.current ? 'active' : '';
                pagination.append(`
                    <li class="page-item ${active}">
                        <a class="page-link" href="#" onclick="changePage(${i})">${i}</a>
                    </li>
                `);
            }
            
            // 下一页
            const nextDisabled = page.current === page.totalPage ? 'disabled' : '';
            pagination.append(`
                <li class="page-item ${nextDisabled}">
                    <a class="page-link" href="#" onclick="changePage(${page.current + 1})">下一页</a>
                </li>
            `);
        }
        
        // 切换页面
        function changePage(page) {
            currentPage = page;
            searchLogs();
        }
        
        // 查看详情
        function viewDetail(logId) {
            window.open('entity-change-detail.html?id=' + logId, '_blank');
        }
        
        // 显示错误信息
        function showErrorMessage(message) {
            const tbody = $('#logTableBody');
            tbody.empty();
            tbody.append(`<tr><td colspan="7" class="text-danger text-center">${message}</td></tr>`);
        }
    </script>
</body>
</html>